import React, { Fragment, useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card,Table,Form, Input, Modal, message,Button,Popconfirm, DatePicker, Col,Row} from 'antd';
import {queryRequest,editRequest,deleteRequest,addRequest} from './services';


const Index = () => {
  const [currentInfo,setCurrentInfo] = useState<{show:boolean,info:any}>({show:false,info:{}});
  const [dataSource,setDataSource] = useState<any[]>([]);
  const [form] = Form.useForm();
  const [selectedRowKeys,setSelectedRowKeys] = useState<any[]>([]);//选择的行
  const columns = [
    { 
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '订单ID',
      dataIndex: 'order_id',
    },
    {
      title: '手机',
      dataIndex: 'phone',
    },
    {
      title: '地址',
      dataIndex: 'address',
    },
    {
      title: '时间',
      dataIndex: 'time',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id:number,record:any) => <Fragment>
        {/* {
          status!=='complate' && 
        } */}
        {/* <Button type='link' onClick={() => { handleEdit(record)}}> 编辑 </Button> */}
        <Popconfirm
          title="确定删除吗？"
          onConfirm={()=>{ handleDelete(id)}}
        >
          <Button danger  type='link'>删除</Button>
        </Popconfirm>
      </Fragment> 
    },
  ];
  //初始化
  useEffect(() => {
    getList();
  },[]);
  //请求列表接口---请求
  const getList = () => { 
    queryRequest().then((res:any) => {
      setDataSource(res.map((i:any) => ({...i,key:i.id})))
      console.log(res)
    });
  }
  //送出----请求
  const handleSend = (ids:any[]) => {
    console.log(ids)
  }
  //完成---请求
  const handleCompleted = (ids:any[]) => {
    console.log(ids)
  }
  //删除---请求
  const handleDelete = (id:any) => {
    deleteRequest({id:id}).then(res => {
      if(res.success){
        message.success('删除成功');
        getList();
      }
    })
  }


  return <PageHeaderWrapper title={false}>
    <Card>
      <Row>
        <Col>
          <Form form={form} layout='inline'>
            <Form.Item label='日期'>
              <DatePicker/>
            </Form.Item>
          </Form>
        </Col>
        <Col>
          <Button 
            disabled={selectedRowKeys.length===0} 
            onClick={()=>{
              handleSend(selectedRowKeys)
            }}
          >批量送出</Button>
          <Button 
            disabled={selectedRowKeys.length===0}
            onClick={()=>{
              handleCompleted(selectedRowKeys)
            }}
          >批量完成</Button>
          <Button>导出为Excel</Button>
        </Col>
      </Row>
      <Table
        rowKey='order_id'
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        rowSelection={{
          selectedRowKeys:selectedRowKeys,
          onChange:(selectedRowKeys:any[])=>{
            console.log(selectedRowKeys);
            setSelectedRowKeys(selectedRowKeys);
          },
        }}
      />
    </Card>
  </PageHeaderWrapper>
}

export default Index;
